<script>
    // scripts.js

    // 联系人数据
    const contacts = [
        {id: '1', name: '张三', avatar: 'https://example.com/avatar1.jpg', messages: [{text: '你好！', time: '2024-11-27 10:00', isReceived: true}, {text: '今天天气不错。', time: '2024-11-27 10::05', isReceived: true}]},
        {id: '2', name: '李四', avatar: 'https://example.com/avatar2.jpg', messages: [{text: '嗨！', time: '2024-11-27 11:00', isReceived: true}, {text: '有什么新鲜事吗？', time: '2024-11-27 11:05', isReceived: true}]}
    ];

    // 当文档加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
        // 获取DOM元素
        const contactList = document.getElementById('contactList'); // 获取联系人列表
        const chatHeader = document.getElementById('chatHeader'); // 获取聊天头部
        const chatAvatar = document.getElementById('chatAvatar'); // 获取聊天头像
        const chatName = document.getElementById('chatName'); // 获取聊天名称
        const messageArea = document.getElementById('messageArea'); // 获取消息区域
        const sendButton = document.getElementById('sendButton'); // 获取发送按钮
        const messageInput = document.getElementById('messageInput'); // 获取消息输入框

        // 初始化联系人列表
        contacts.forEach(contact => {
            // 创建联系人列表项
            const li = document.createElement('li'); // 创建列表项
            const img = document.createElement('img'); // 创建头像图片
            img.src = contact.avatar; // 设置头像图片的源
            img.alt = `${contact.name} 的头像`; // 设置头像图片的alt属性

            const infoDiv = document.createElement('div'); // 创建信息容器
            infoDiv.className = 'contact-info'; // 设置信息容器的类名

            const nameSpan = document.createElement('span'); // 创建姓名标签
            nameSpan.className = 'name'; // 设置姓名标签的类名
            nameSpan.textContent = contact.name; // 设置姓名标签的内容

            const latestMessage = document.createElement('div'); // 创建最新消息标签
            latestMessage.className = 'latest-message'; // 设置最新消息标签的类名
            latestMessage.textContent = contact.messages[contact.messages.length - 1].text || ''; // 设置最新消息标签的内容

            const timeSpan = document.createElement('span'); // 创建时间标签
            timeSpan.className = 'time'; // 设置时间标签的类名
            timeSpan.textContent = formatTime(contact.messages[contact.messages.length - 1].time); // 设置时间标签的内容

            // 将子元素添加到联系人列表项
            infoDiv.appendChild(nameSpan); // 将姓名标签添加到信息容器
            infoDiv.appendChild(latestMessage); // 将最新消息标签添加到信息容器

            li.appendChild(img); // 将头像图片添加到列表项
            li.appendChild(infoDiv); // 将信息容器添加到列表项
            li.appendChild(timeSpan); // 将时间标签添加到列表项
            li.setAttribute('data-id', contact.id); // 设置列表项的数据ID

            // 添加点击事件监听器
            li.addEventListener('click', (event) => selectContact(contact, event)); // 为列表项添加点击事件

            // 将联系人列表项添加到联系人列表
            contactList.appendChild(li); // 将列表项添加到联系人列表
        });

        // 选择联系人的函数
        function selectContact(contact, event) {
            // 更新聊天头部信息
            chatName.textContent = contact.name; // 设置聊天名称
            chatAvatar.src = contact.avatar; // 设置聊天头像

            // 清空消息区并显示历史消息
            messageArea.innerHTML = ''; // 清空消息区域
            contact.messages.forEach(message => addMessage(message.text, message.time, message.isReceived)); // 显示历史消息

            // 更新选中状态
            Array.from(contactList.children).forEach(item => item.classList.remove('active')); // 移除所有联系人列表项的选中状态
            event.currentTarget.classList.add('active'); // 为当前点击的联系人列表项添加选中状态
        }

        // 添加消息到消息区域的函数
        function addMessage(text, time, isReceived = false) {
            // 创建消息元素
            const div = document.createElement('div'); // 创建消息容器
            div.className = `message ${isReceived ? 'received' : 'sent'}`; // 设置消息容器的类名

            const avatarImg = document.createElement('img'); // 创建头像图片
            avatarImg.className = 'avatar'; // 设置头像图片的类名
            avatarImg.src = isReceived ? contacts[0].avatar : 'https://example.com/my_avatar.jpg'; // 设置头像图片的源

            const contentDiv = document.createElement('div'); // 创建内容容器
            contentDiv.className = 'content'; // 设置内容容器的类名
            contentDiv.textContent = text; // 设置内容容器的内容

            const timeSpan = document.createElement('span'); // 创建时间标签
            timeSpan.className = 'time'; // 设置时间标签的类名
            timeSpan.textContent = formatTime(time); // 设置时间标签的内容

            if (isReceived) {
                // 对方的消息
                div.appendChild(avatarImg); // 将头像图片添加到消息容器
                div.appendChild(contentDiv); // 将内容容器添加到消息容器
                div.appendChild(timeSpan); // 将时间标签添加到消息容器
            } else {
                // 用户发出的消息
                div.appendChild(contentDiv); // 将内容容器添加到消息容器
                div.appendChild(avatarImg); // 将头像图片添加到消息容器
                div.appendChild(timeSpan); // 将时间标签添加到消息容器
            }

            // 将消息添加到消息区域
            messageArea.appendChild(div); // 将消息容器添加到消息区域
            messageArea.scrollTop = messageArea.scrollHeight; // 自动滚动到底部
        }

        // 格式化时间的函数
        function formatTime(timestamp) {
            const date = new Date(timestamp); // 创建日期对象
            return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`; // 返回格式化后的时间
        }

        // 发送按钮点击事件
        sendButton.addEventListener('click', sendMessage); // 为发送按钮添加点击事件

        // 按下 Enter 键发送消息
        messageInput.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && !event.shiftKey) { // 按下 Enter 键且没有 Shift 键时发送消息
                event.preventDefault(); // 阻止默认行为（换行）
                sendMessage(); // 调用发送消息函数
            }
        });

        // 发送消息的函数
        function sendMessage() {
            const input = document.getElementById('messageInput'); // 获取消息输入框
            const message = input.value.trim(); // 获取并去除输入框中的空白字符
            if (message) { // 如果消息不为空
                const now = new Date().toISOString(); // 获取当前时间
                addMessage(message, now, false); // 发送消息
                input.value = ''; // 清空输入框
            }
        }
    });
</script>